<template>
  <a-card :bordered="false">
    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-row :gutter="48">
          <a-col :md="5" :sm="15">
            <a-form-item label="工号">
              <a-input placeholder="请输入工号" v-model="queryParam.empCode"/>
            </a-form-item>
          </a-col>
          <a-col :md="5" :sm="15">
            <a-form-item label="员工姓名">
              <a-input placeholder="请输入员工姓名" v-model="queryParam.empName"/>
            </a-form-item>
          </a-col>
          <a-col :md="5" :sm="15">
            <a-form-item label="部门">
              <a-input placeholder="请输入部门" v-model="queryParam.departId"/>
            </a-form-item>
          </a-col>
          <a-col :md="5" :sm="15">
            <a-form-item label="级别">
              <a-select style="width: 100%"  v-model="queryParam.rankId" :allowClear="true">
                <a-select-option value="">请选择</a-select-option>
                <a-select-option v-for="(d,index) in rankList_TableDict" :key="index" :value="d.key" >{{ d.value }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="5" :sm="15">
            <a-form-item label="人员状态">
              <a-select style="width: 100%"  v-model="queryParam.status" :allowClear="true">
                <a-select-option value="">请选择</a-select-option>
                <a-select-option v-for="(d,index) in project_user_statusDictList" :key="index" :value="d.dictValue" >{{ d.dictLabel }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="5" :sm="15">
            <a-form-item label="城市">
              <a-input placeholder="请输入城市" v-model="queryParam.city"/>
            </a-form-item>
          </a-col>
          <a-col :md="5" :sm="15">
            <a-form-item label="电子邮箱">
              <a-input placeholder="请输入电子邮箱" v-model="queryParam.email"/>
            </a-form-item>
          </a-col>
          <a-col :md="5" :sm="15">
            <a-form-item label="电话">
              <a-input placeholder="请输入电话" v-model="queryParam.phone"/>
            </a-form-item>
          </a-col>
          <a-col :md="5" :sm="15">
            <a-form-item label="职位">
              <a-input placeholder="请输入职位" v-model="queryParam.jobRole"/>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <span class="table-page-search-submitButtons">
              <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
              <a-button style="margin-left: 8px" @click="() => queryParam = Object.assign({},defaultQueryParam)">重置</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <div class="table-operator">
      <a-button v-if="addEnable" type="primary" icon="plus" @click="handleAdd()">新建</a-button>
      <a-dropdown v-if="removeEnable&&selectedRowKeys.length > 0">
        <a-button type="danger" icon="delete" @click="delByIds(selectedRowKeys)">删除</a-button>
      </a-dropdown>
    </div>
    <s-table
      size="default"
      ref="table"
      rowKey="empId"
      :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
      :columns="columns"
      :data="loadData">
      <span slot="rankList_TableDict" slot-scope="text, record">
        {{ text | rankList_TableList_Filter }}
      </span>
      <span slot="project_user_statusDict" slot-scope="text, record">
        {{ text | project_user_statusFilter }}
      </span>
      <span slot="action" slot-scope="text, record">
        <a v-if="editEnabel" @click="handleEdit(record.empId)">编辑</a>
        <a-divider type="vertical" />
        <a v-if="removeEnable" @click="delByIds([record.empId])">删除</a>
      </span>
    </s-table>
    <employee-modal ref="modal" @ok="handleOk"/>
  </a-card>
</template>
<script>
import { STable } from '@/components'
import { getEmployeeList,delEmployee } from '@/api/project/employee'
import EmployeeModal from './modules/EmployeeModal.vue'
import { checkPermission } from '@/utils/permissions'
import { dictList,getDictMapKey,tableDictList,getTableDictKey} from '@/utils/dict'
import { Modal, Button } from 'antd'
import moment from "moment"

const { confirm } = Modal;
var vm={}
const defaultQueryParam={
       rankId:"",
      status:"",
}
export default {
  name: 'TableList',
  components: {
    STable,
    EmployeeModal
  },
  data () {
    return {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      rankList_TableDict:[],
      project_user_statusDictList:[],
      form: this.$form.createForm(this),
      mdl: {},
      query : {

      },
      // 高级搜索 展开/关闭
      advanced: false,
      // 查询参数
      queryParam: Object.assign({},defaultQueryParam),
      // 表头
      columns: [
        {
          title: '工号',
          dataIndex: 'empCode'
        },
        {
          title: '员工姓名',
          dataIndex: 'empName'
        },
        {
          title: '部门',
          dataIndex: 'departId'
        },
        {
            title: '级别',
            dataIndex: 'rankId',
            scopedSlots: { customRender: 'rankList_TableDict' }
        },
        {
            title: '人员状态',
            dataIndex: 'status',
            scopedSlots: { customRender: 'project_user_statusDict' }
        },
        {
          title: '城市',
          dataIndex: 'city'
        },
        {
          title: '电子邮箱',
          dataIndex: 'email'
        },
        {
          title: '电话',
          dataIndex: 'phone'
        },
        {
          title: '职位',
          dataIndex: 'jobRole'
        },
        {
          title: '操作',
          width: '200px',
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' }
        }
      ],
      // 加载数据方法 必须为 Promise 对象
      loadData: parameter => {
        return this.findList(Object.assign(parameter, this.queryParam))
      },
      selectedRowKeys: [],
      selectedRows: [],
      addEnable: checkPermission('project:employee:add'),
      editEnabel: checkPermission('project:employee:edit'),
      removeEnable: checkPermission('project:employee:remove')
    }
  },
  filters: {
   rankList_TableList_Filter(service) {
      return vm.rankListTableDictMap[service]
   },
    project_user_statusFilter(service) {
       return vm.project_user_statusMap[service]
    },
  },
  created () {
      this.dictSync();
  },
  methods: {
    findList (parameter) {
        return getEmployeeList(parameter)
    },
    async dictSync () {
      vm.rankListTableDictMap=await getTableDictKey('rankList');
      this.rankList_TableDict=await tableDictList('rankList');
      vm.project_user_statusMap=await getDictMapKey('project_user_status');
      this.project_user_statusDictList=await dictList('project_user_status');
    },
    onSelectChange (selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
    },
    handleAdd () {
      var query=this.query;
      this.$refs.modal.add(query)
    },
    handleEdit (record) {
        this.$refs.modal.edit(record);
    },
    handleOk () {
      this.$refs.table.refresh(true)
      console.log('handleSaveOk')
    },
    delByIds (ids) {
         var message=this.$message;
         const obj=this;
         confirm({
                title: '删除提醒',
                content: '您确定要删除数据吗？',
                okText: '确认',
                cancelText: '取消',
                onOk() {
                  delEmployee({ ids: ids.join(',') }).then(res => {
                       if (res.code === 0) {
                               message.success('删除成功')
                               obj.handleOk()
                               return new Promise((resolve, reject) => {
                                    setTimeout(Math.random() > 0.5 ? resolve : reject, 1000);
                            }).catch(() => console.log('Oops errors!'));
                        } else {
                            message.error(res.msg)
                        }
                       this.selectedRowKeys = []
                   })
                },
                onCancel() {},
          });
    }
  },
  watch: {
    /*
      'selectedRows': function (selectedRows) {
        this.needTotalList = this.needTotalList.map(item => {
          return {
            ...item,
            total: selectedRows.reduce( (sum, val) => {
              return sum + val[item.dataIndex]
            }, 0)
          }
        })
      }
      */
  }
}
</script>
